<template>
  <div class="Welcome">
    <el-row class="tit">
      <el-col>我的账户信息</el-col>
    </el-row>
    <el-card>
      <el-row class="content">
        <el-col :span="8">
          <el-row :gutter="10">
            <el-col :span="4">
              <img style="width:100%" :src="userInfo.avater" alt />
            </el-col>
            <el-col :span="20">
              <el-row class="user">
                <el-col>用户名：{{userInfo.name}}</el-col>
              </el-row>
              <el-row class="email">
                <el-col>邮箱：{{userInfo.email}}</el-col>
              </el-row>
              <el-row class="email">
                <el-col>用户等级：{{userInfo.isAdmin==true?'管理员':'普通用户'}}</el-col>
              </el-row>
              <el-row class="email">
                <el-col :span="6">
                  <i class="el-icon-s-custom">
                    <span class="remark">查看信息</span>
                  </i>
                </el-col>
                <el-col :span="6">
                  <i class="el-icon-s-tools">
                    <span class="remark" @click="editPassword">修改密码</span>
                  </i>
                </el-col>
                <el-col :span="12"></el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="16">
          <el-row :gutter="20">
            <el-col :span="5" v-if="userInfo.isAdmin">
              <p class="info">用户数量：{{total}}</p>
            </el-col>
            <el-col :span="5" v-if="userInfo.isAdmin">
              <p class="info">待审核文章：{{awiatArticle}}</p>
            </el-col>
            <el-col :span="5">
              <p class="info">已发布：{{fabutotal}}</p>
            </el-col>
            <el-col :span="5">
              <p class="info">草稿箱：{{caogaototal}}</p>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <el-row :gutter="20" class="z">
      <el-col :span="14">
        <el-row class="tit">
          <el-col>最新公告</el-col>
        </el-row>
        <el-card class="newInfo">最新公告</el-card>
      </el-col>
      <el-col :span="10">
        <el-row class="tit">
          <el-col>登录记录</el-col>
        </el-row>
        <el-card class="newInfo">
          <el-row>
            <el-col>功能暂未开通</el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="tit">
      <el-col>友情提示</el-col>
    </el-row>
    <el-card style="height:130px;"></el-card>
    <!-- 修改密码模态框 -->
    <el-dialog title="修改密码" :visible.sync="editPasswordDialog" width="40%" @close="closeDialog">
      <el-form
        :model="editPasswordForm"
        status-icon
        :rules="editPasswordFormRules"
        ref="editPasswordFormRef"
        label-width="100px"
      >
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input type="password" v-model="editPasswordForm.oldPassword"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="editPasswordForm.newPassword"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="renewPassword">
          <el-input v-model="editPasswordForm.renewPassword"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editPasswordDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitEditPassForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import jwt_decode from 'jwt-decode'
export default {
  name: 'Welcome',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.editPasswordForm.newPassword !== '') {
          this.$refs.editPasswordFormRef.validateField('renewPassword')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.editPasswordForm.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      userInfo: {},
      total: '',
      awiatArticle: '',
      fabutotal: '',
      caogaototal: '',
      editPasswordDialog: false,
      editPasswordForm: {
        oldPassword: '',
        newPassword: '',
        renewPassword: ''
      },
      editPasswordFormRules: {
        oldPassword: [
          {
            required: true,
            message: '原始密码不能为空',
            trigger: 'blur'
          }
        ],
        newPassword: [{ validator: validatePass, trigger: 'blur' }],
        renewPassword: [{ validator: validatePass2, trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getUserInfo()
    this.getUserNum()
  },
  methods: {
    getUserInfo() {
      const token = window.sessionStorage.getItem('token')
      var decoded = jwt_decode(token)
      this.userInfo = decoded
    },
    //获取用户数量,待审核文章数量,已发布文章
    getUserNum() {
      this.$axios.get('api/admin/').then(result => {
        // console.log(result.data.data.total)
        this.total = result.data.data.total
      })
      this.$axios.get('api/admin/CheckArticle').then(result => {
        this.awiatArticle = result.data.length
      })
      //1：全部文章，2：草稿文章 ，3：待审核文章，4：已发布文章
      this.$axios
        .get('api/admin/MyArticle', { params: { query: '4' } })
        .then(result => {
          this.fabutotal = result.data.length
        })
      this.$axios
        .get('api/admin/MyArticle', { params: { query: '2' } })
        .then(result => {
          this.caogaototal = result.data.length
        })
    },
    editPassword() {
      this.editPasswordDialog = true
    },
    closeDialog() {
      this.$refs.editPasswordFormRef.resetFields()
    },
    submitEditPassForm() {
      this.$refs.editPasswordFormRef.validate(valid => {
        if (valid) {
          this.$axios
            .put('/api/admin/editPass', this.editPasswordForm)
            .then(result => {
              this.$message({
                type: result.data.type,
                message: result.data.msg
              })
              this.editPasswordDialog = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
.tit {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  padding-left: 8px;
  font-weight: 400;
  background: #ddd;
}
.content {
  height: 90px;
}
.email {
  margin-top: 10px;
  font-size: 12px;
}
.user {
  font-size: 12px;
}
.remark {
  color: aqua;
  padding-left: 5px;
  cursor: pointer;
}

.info {
  width: 100%;
  height: 50px;
  background: #ccc;
  font-size: 14px;
  line-height: 50px;
  text-align: center;
  box-shadow: 0px 6px 13px #ccc;
  border-radius: 10px;
  cursor: pointer;
}
.z {
  margin-top: 10px;
}
.newInfo {
  height: 240px;
  background: #fff;
  margin-top: 2px;
  font-size: 12px;
}
</style>